:root {
    --alpha: 60%;

    --bar-bg0: #fff;
    --bar-bg: color-mix(in srgb, var(--bar-bg0) var(--alpha), transparent);
    --bar-hover-color: color-mix(in srgb, var(--hover-color) 25%, transparent);
    --bg: #fff;
    --hover-color: #dfdfdf;
    --font-color: #000;
    --icon-color: none;

    --d-bar-bg0: #000;
    --d-bar-bg: color-mix(in srgb, var(--d-bar-bg0) var(--alpha), transparent);
    --d-bar-hover-color: color-mix(
        in srgb,
        var(--d-hover-color) 25%,
        transparent
    );
    --d-bg: #000;
    --d-hover-color: #333;
    --d-font-color: #fff;
    --d-icon-color: invert(1);

    --m-color1: color-mix(in srgb, var(--hover-color) 85%, var(--font-color));
    --m-color2: color-mix(in srgb, var(--hover-color) 55%, transparent);
    --transition: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    --button-active: scale(0.85);
    --border-radius: 8px;
    --blur: blur(10px);
    --shadow: #0003 0 0 4px;
    --height: 40px;
    --color: #000;
    --border: 1px #000 solid;
    --color-size: 150px;
    --color-i-size: 10px;
    --monospace: ;
    --main-font: sans-serif;
    --bar-size: 60px;
    --bar-icon: 0.7;
    --b-button: 32px;
    --o-padding: 8px;
}

html,
body {
    margin: 0;
    font-family: var(--main-font);
    color: var(--color);
}

.icon {
    position: absolute;
    pointer-events: none;
    left: 0;
    top: 0;
    max-width: 100%;
    max-height: 100%;
    filter: var(--icon-color);
    user-select: none;
}

kbd {
    display: inline-block;
    padding: 2px 4px;
    border-radius: var(--border-radius);
    background: linear-gradient(315deg, #e6e6e6, #ffffff);
    font-family: var(--monospace);
    border: 1px solid #ddd;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #ddd;
}
::-webkit-scrollbar-thumb:hover {
    background: #ccc;
}
::-webkit-scrollbar-track {
    background: #0000;
}
::-webkit-scrollbar-button {
    height: 8px;
    width: 8px;
    background-color: #0000;
}
::-webkit-scrollbar-corner {
    background-color: #0000;
}

/* 用于截屏界面固定 */
.hover_b {
    background-color: var(--hover-color);
}

button {
    outline: none;
    border: none;
    color: var(--color);
    user-select: none;
    font-family: var(--main-font);
    font-size: 1rem;
    transition: var(--transition);
    border-radius: var(--border-radius);
    background-color: var(--bg);
    &:hover {
        background-color: var(--hover-color);
        box-shadow: var(--shadow);
    }
}

button:active {
    transform: var(--button-active);
}

button:has(.icon) {
    position: relative;
    width: var(--b-button);
    height: var(--b-button);
    flex-shrink: 0;
}

input {
    outline: none;
    background-color: #0000;
    color: var(--color);
}

select {
    outline: none;
    border: none;
    user-select: none;
    border-radius: var(--border-radius);
    background-color: var(--bg);
    font-size: 1rem;
    transition: var(--transition);
    &:hover {
        background-color: var(--hover-color);
    }
}

option {
    font-size: 1rem;
    background-color: var(--bg);
}

textarea {
    outline: none;
    background-color: #0000;
    color: var(--color);
}

input[type="checkbox"] {
    appearance: none;
    top: 2px;
    display: inline-block !important;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    background-color: var(--m-color2);
    border-radius: 4px;
    transition: var(--transition);
}
input[type="checkbox"]:hover {
    box-shadow: var(--shadow);
}
input[type="checkbox"]:checked {
    background-color: var(--m-color1) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 8 9 19 4 14'%3E%3C/polyline%3E%3C/svg%3E");
    background-position: center;
    background-size: 0.75em auto;
    background-repeat: no-repeat;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bar-bg: var(--d-bar-bg) !important;
        --bar-hover-color: var(--d-bar-hover-color) !important;
        --bg: var(--d-bg) !important;
        --hover-color: var(--d-hover-color) !important;
        --icon-color: var(--d-icon-color) !important;
        --shadow: #fff9 0 0 2px;
        --color: #fff;
        --border: 1px #fff solid;
    }
    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: #444;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
    kbd {
        box-shadow: 0 5px #fff4;
        background: linear-gradient(315deg, #191919, #000);
    }
}
